<template>
	<div class="decorate-editor"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <div :class="['fulltext', !tplItemData.isPreview?'preview-img':'']" v-html="fulltext"></div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { removeFontFamily, openPage } from '@/utils/utils'
  // 全局注册
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        fulltext: '',
        img_array: [] // 存放img图片数组
      }
    },
    watch: {
      tplItemData(val) {
        this.fulltext = removeFontFamily(val.fulltext)
      }
    },
    created() {
      // TODO 富文本style包含""在kbone里面会报错 特殊处理
      this.fulltext = removeFontFamily(this.tplItemData.fulltext)
    },
    mounted() {
      // TODO 解决小程序图片留白问题
      this.$nextTick(() => {
        if (document.querySelector('.decorate-editor').querySelectorAll('img').length) {
          document.querySelector('.decorate-editor').querySelectorAll('img').forEach((item,index) => {
            item.setAttribute('mode','widthFix')
          })
        }
      })
      
      this.$nextTick(() => {
        const that = this
        that.img_array = []
        // 获取所有可以预览的图片
        document.querySelectorAll('.fulltext.preview-img img').forEach(function(elem, ind) {
          that.img_array.push(elem.src)
        })
        // 给图片绑定点击事件
        document.querySelectorAll('.fulltext.preview-img img').forEach(function(elem, ind) {
          elem.onclick = function(e) {
            let _index = 0
            // 获取当前点击的是第几张图片
            that.img_array.forEach(function(_src, index) {
              if (_src == e.target.src) {
                _index = index
              }
            })
              
            // TODO 小程序图片预览
            wx.previewImage({
              current: e.target.src, //当前图片地址
              urls: that.img_array,  //所有要预览的图片的地址集合数组形式
            })
            
          }
        })
        // TODO 小程序对于空的p标签特殊处理
        document.querySelectorAll('.fulltext p').forEach(function(elem, ind) {
          if (!elem.innerText) {
            elem.style.lineHeight = 1.5
            elem.style.fontSize = '12px'
          }
        })
        // TODO 装修了a标签有跳转链接 使用openPage跳转
        document.querySelectorAll('.fulltext a').forEach(function(elem, ind) {
          const _href = elem.getAttribute('href')
          if (_href) {
            elem.setAttribute('href', '')
            elem.onclick = function(e) {
              openPage(_href)
            }
          }
        })
      })
    }
  })
</script>

<style lang="scss">
.decorate-editor{
  .fulltext {
    word-break: break-all;
    i,
    em {
      font-style: italic;
      font-weight:inherit;
    }
    strong{
      font-style: inherit;
      font-weight:bold;
    }
    p {
      font-size: 34px;
      line-height: 56px;
      br {
        display: inline-block;
      }
    }
    table {
      width: 100% !important;
      height: auto !important;
    }
    img {
      max-width: 100% !important;
      height: auto;
      // display: block;
      vertical-align: middle;
    }
    h1,
    h2 {
      font-weight: bold;
      padding: 38px 0;
    }
    h1 {
      font-size: 64px;
    }
    h2 {
      font-size: 48px;
    }
    ul, ol {
      width:95%;
      padding-left:5%;
    }
    li{
      list-style-type: inherit;
    }
  }
}
</style>
